<!--compontens下放公共的组件pages下放路由页面-->
<template>
  <div class="content">
      <div class="app-header">
          <router-link :to="{ path: '/'}">
            <img src="../assets/logo.png" alt="logo"> 
          </router-link>
          <div class="head-nav">
              <ul class="nav-list">
                  <li>{{ username }}</li>
                  <li v-if="username!== ''" class="nav-pile">|</li>
                  <li v-if="username!== ''" @click="logOut">退出</li>
                  <li v-if="username=== ''" @click="showLogDialog">登录</li>
                  <li v-if="username=== ''" class="nav-pile">|</li>
                  <li v-if="username=== ''" @click="showRegDialog">注册</li>
                  <li class="nav-pile">|</li>
                  <li @click="showAboutDialog">关于</li>
              </ul>
          </div>
      </div>
      <div class="app-content">
          <keep-alive>
            <router-view></router-view>
          </keep-alive>
      </div>
      <!-- <div class="app-foot">wzy 504706316@qq.com</div> -->
      <!-- 只有一个dialog -->
      <!-- <my-dialog :is-show="isDialogShow" @on-close="closeDialog">
          <div v-if="isLogDialogShow">logDialog</div>
          <div v-if="isRegDialogShow">regDialog</div>
          <div v-if="isAboutDialogShow">AboutDialog</div>
      </my-dialog> -->

      <!-- 分成三个dialog -->
      <my-dialog :is-show="isLogDialogShow" @on-close="closeDialog">
          <log-form @has-data="onSuccessLog"></log-form>
      </my-dialog>

      <my-dialog :is-show="isRegDialogShow" @on-close="closeDialog">
          <p>regDialog</p>
      </my-dialog>

      <my-dialog :is-show="isAboutDialogShow" @on-close="closeDialog">
          <p>aboutDialog</p>
      </my-dialog>
  </div>
</template>

<script>
import myDialog from './dialog'
import logForm from './logForm'
export default {
  components : {
    myDialog,
    logForm
  },
  data () {
      return {
          isLogDialogShow : false,
          isRegDialogShow : false,
          isAboutDialogShow: false,
          isDialogShow: false,
          username: ''
      }
  },
  methods:{
      showLogDialog () {
          this.isLogDialogShow = true,
          this.isDialogShow = true
      },
      showRegDialog () {
          this.isRegDialogShow = true,
          this.isDialogShow = true
      },
      showAboutDialog () {
          this.isAboutDialogShow = true,
          this.isDialogShow = true
      },
      closeDialog () {
          this.isLogDialogShow = false,
          this.isRegDialogShow = false,
          this.isAboutDialogShow = false,
          this.isDialogShow = false
      },
      onSuccessLog (data) {
          this.closeDialog ()
          this.username = data.name;
      },
      logOut () {
          this.username = '';
      }
  }
}
</script>

<style>
*{
    margin: 0;
    padding: 0;
 }

li{
    list-style: none;
}

html,body,.content{
    height: 100%;
    width: 100%;
    background-color: #d1d1ce;
    
}

.app-header{
    background: #363636;
    color: #b2b2b2;
    height: 60px;
    width: 100%;
 }

.app-header img{
    width: 50px;
    margin: 5px 0 0 15px;
}

.head-nav{
    float: right;
    margin:10px 20px;
}

.nav-list li{
    cursor: pointer;
    float: left;
}

.nav-pile {
  padding: 0 10px;
}

.app-foot {
  text-align: center;
  height: 50px;
  width: 100%;
  line-height: 50px;
  background: #e3e4e8;
  clear: both;
  /* margin-top: 30px; */
}

</style>
